<form {{action "onSave" on="submit"}}>

  <div class="dataset-deprecation-toggle__toggle-header">

    <p class="dataset-deprecation-toggle__toggle-header__label">
      Is this dataset deprecated?
    </p>

    {{input
      id="dataset-is-deprecated"
      type="checkbox"
      title="Is this dataset deprecated?"
      class="toggle-switch toggle-switch--light"
      checked=(readonly deprecatedAlias)
      change=(action "toggleDeprecatedStatus")
    }}
    <label for="dataset-is-deprecated" class="toggle-button">
    </label>

  </div>

  {{#if deprecatedAlias}}

    {{medium-editor
      deprecationNoteAlias
      options=editorOptions
      class="comment-new__content"
      onChange=(action (mut deprecationNoteAlias))}}

    <h4 class="dataset-deprecation-header">When should this dataset be decommissioned?</h4>

    {{#basic-dropdown as |dropdown|}}
      <input type="text"
             placeholder="Enter Date"
             data-ebd-id="{{dropdown.uniqueId}}-trigger"
             class="dataset-deprecation-toggle__cal-input-trigger"
             value={{if decommissionTime (moment-format decommissionTime 'DD-MMM-YYYY')}}
             onclick={{dropdown.actions.toggle}}
             readonly>

      {{#dropdown.content class="dataset-deprecation-toggle__cal-dropdown"}}
        {{#power-calendar
          selected=selectedDate
          center=centeredDate
          class="dataset-deprecation-toggle__decommission-calendar"
          onSelect=(action "onDecommissionDateChange" value="date")
          onCenterChange=(action (mut centeredDate) value="date") as |calendar|}}

          <nav class="ember-power-calendar-nav">

            <button
              type="button"
              class="ember-power-calendar-nav-control"
              onclick={{action calendar.actions.moveCenter -1 'month'}}>
              &lt;
            </button>
            <div class="ember-power-calendar-nav-title">
              {{moment-format calendar.center 'MMMM YYYY'}}
            </div>
            <button
              type="button"
              class="ember-power-calendar-nav-control"
              onclick={{action calendar.actions.moveCenter 1 'month'}}>
              &gt;
            </button>
          </nav>

          {{calendar.days minDate=minSelectableDecommissionDate}}

        {{/power-calendar}}
      {{/dropdown.content}}
    {{/basic-dropdown}}


    <p class="decommission-date {{unless decommissionTime 'decommission-date--required'}}">
      {{#unless decommissionTime}}
        Please specify a date when this dataset will be decommissioned
      {{/unless}}

      <strong>
        {{if decommissionTime (concat 'Will be decommissioned on ' (moment-format decommissionTime 'MMMM DD YYYY')) ''}}
      </strong>
    </p>

    <span>
      {{input
        type="checkbox"
        name="deprecated.acknowledge"
        id="acknowledge-deprecation"
        checked=(readonly isDeprecationAcknowledged)
        change=(action "onAcknowledgeDeprecationNotice")}}

      <label for="acknowledge-deprecation">
        <p>By checking this box, you acknowledge that you must keep this dataset compliance updated even after it is deprecated.</p>
        <p>
          For more information on how to decommission your dataset, please follow this link:
          <a href={{wikiLinks.datasetDecommission}} target="_blank" rel="noopener">
            Dataset Decommission
          </a>
        </p>
      </label>
    </span>


  {{/if}}

  <div class="dataset-deprecation-toggle__actions">
    <button
      type="submit"
      class="nacho-button--large nacho-button--secondary"
      disabled={{and deprecatedAlias (or (not decommissionTime) (not isDeprecationNoticeAcknowledged))}}>
      Update Deprecation Status
    </button>
  </div>
</form>
